import { WeaTab, WeaLocaleProvider,WeaBrowser,WeaDialog,WeaProgress } from 'ecCom';
import { observer } from 'mobx-react';
import { Button, Popover } from 'antd';
import DownloadCondition from './DownloadCondition'
import DataList from './list';
import DataPath from './path';
import DataAnalysis from './analysis';
import Condition from './Condition';
const getLabel = WeaLocaleProvider.getLabel;

import './index.less';
import { search } from '../../../stores/task/list/action';
@observer
export default class DataViewRight extends React.Component {
    render() {
        const { store } = this.props;
        const {app, selectedTask} = store;
        const dataParams = selectedTask ? {taskid:selectedTask, nodeid: ''} : app ? {pathid:app.pathid, nodeid: ''} : {nodeid: ''};
        
        return (
            <div className="edc-data-view">
                <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@p6zlbg`}
                    datas={store.tabs}
                    keyParam="key"  //主键
                    selectedKey={store.selectedTab}
                    searchType={store.searchType}
                    onChange={store.onChangeTab}
                    //onSearch={store.quickSearch}
                    //onSearchChange={store.changeQuickSearchValue}
                    //searchsBaseValue={store.quickSearchValue}

                    buttons={this.getButtons()}
                    showSearchAd={store.conditionVisible}
                    setShowSearchAd={store.setConditionVisible}
                    buttonsAd={this.getConditionButtons()}
                    searchsAd={<Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@cr3b9x`} store={store} />}
                />
                {store.selectedTab === 'data' && <DataList ecId={`${this && this.props && this.props.ecId || ''}_DataList@lio3e6`} store={store} />}
                {store.selectedTab === 'path' && <DataPath ecId={`${this && this.props && this.props.ecId || ''}_DataPath@x14ggh`} store={store} />}
                {store.selectedTab === 'analysis' && <DataAnalysis ecId={`${this && this.props && this.props.ecId || ''}_DataAnalysis@lmartd`} store={store} />}
                <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@cpnj3c`} 
                    icon={"icon-coms02-Data-center"}
                    title={getLabel('510980','选择节点')}
                    type='edcAppNode' 
                    isSingle={false}
                    customized={true}
                    memorise={true}
                    ref={ref => this.nodeBrowser = ref} 
                    dataParams={dataParams}
                    completeParams={dataParams}
                    destDataParams={dataParams}
                    onChange={(value,a,b,c) => store.excelStore.changeFilterNode(value,a,b,c)}
                />
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@lk7xl7`}
                        onCancel={() => store.pgvisible =false}
                        title={getLabel('514573','导出进度')}
                        visible={store.pgvisible}
                        icon="icon-coms02-Data-center"
                        iconBgcolor="#1a57a0"
                        style={{width: 450, height: 200}}
                        >
                        {store.currentProgress && <div style ={{paddingLeft:30, paddingTop:50}}>{getLabel('514574','当前进度：')}{store.currentProgress}</div>}
                        <div style ={{paddingLeft:30, paddingTop:(store.currentProgress ? 10 : 70)}}>
                            <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@2xdl72`} percent={store.progress}  strokeColor="#0094FF" />
                        </div>
                    
                    </WeaDialog>
            </div>
        )
    }

    getConditionButtons = () => {
        const { store } = this.props;
        return [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jgiu6k@$search`} type="primary" onClick={store.search}>{getLabel('388113', '搜索')}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5204z3@$reset`} type="ghost" onClick={store.clearCondition}>{getLabel('2022', '重置')}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@7i2e4v@$cancel`} type="ghost" onClick={store.setConditionVisible.bind(this, false)}>{getLabel('31129', '取消')}</Button>)
        ]
    }

    getButtons = () => {
        const { store } = this.props;
        const {app} = store;
        
        return store.selectedTab === 'data' ? [
            
            store.rightLevel === 2 && <Button.Group ecId={`${this && this.props && this.props.ecId || ''}_undefined@h9xflp@$ButtonGroup`}>
            {<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@piwk3q@$delete`} onClick={store.excelStore.deleteData} disabled={store.excelStore.sessionKey === ''}>{getLabel(502286, '删除')}</Button>}
        </Button.Group>,
            (app.displayType == 'EXCEL' ? <Button.Group ecId={`${this && this.props && this.props.ecId || ''}_undefined@f7dxf2@$Button.Group`}>
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@tj8b6j@$filterNode`} className={`excel-button${store.excelStore.filterNode ? ' excel-button-active' : ''}`} onClick={() => this.showNodeBrowser()} disabled={store.excelStore.sessionKey === ''}>{getLabel('511700','节点过滤')}</Button>
                </Button.Group> :''),
            (<Button.Group ecId={`${this && this.props && this.props.ecId || ''}_undefined@4jm3ho@$ButtonGroup`}>
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@8mfeqc@$changeHAlign0`} onClick={() => store.excelStore.changeHAlign(0)} className={`tool-btn${store.excelStore.colAlign == 0 ? ' tool-btn-active' : ''}`} ><i className="icon-mode-align-left" /></Button>
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@un1cam@$changeHAlign1`} onClick={() => store.excelStore.changeHAlign(1)} className={`tool-btn${store.excelStore.colAlign == 1 ? ' tool-btn-active' : ''}`}><i className="icon-mode-align-center" /></Button>
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5kl3pk@$changeHAlign2`} onClick={() => store.excelStore.changeHAlign(2)} className={`tool-btn${store.excelStore.colAlign == 2 ? ' tool-btn-active' : ''}`} ><i className="icon-mode-align-right" /></Button>
            </Button.Group>),
            (<Button.Group ecId={`${this && this.props && this.props.ecId || ''}_undefined@koe75i@$ButtonGroup`}><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@kepw4n@$lockCol`} onClick={() => { store.excelStore.lockCol() }} disabled={!store.sessionKey} className={`tool-btn${store.excelStore.colLock == 1 ? ' tool-btn-active' : ''}`}>{getLabel('508440','锁定列')}</Button></Button.Group>),
            (<Button.Group ecId={`${this && this.props && this.props.ecId || ''}_undefined@2m44s7@$ButtonGroup`}>
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@s842uk@$doExcelExport`} onClick={() => { store.doExcelExport() }} disabled={!store.sessionKey || store.exportLoading} className={"`tool-btn` export-btn"}>{getLabel('17416', '导出')} </Button>
                <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@nhatfr@$showContent`} overlayClassName='edc-ds-popover'
                    placement="bottomRight"
                    visible={store.downloadPopverVisible}
                    trigger="click"
                    onVisibleChange={store.showContent}
                    content={(
                        <DownloadCondition ecId={`${this && this.props && this.props.ecId || ''}_DownloadCondition@ftok16@$`} store={store}></DownloadCondition>
                    )}>


                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@dbi5bx@$showExcelExport`} onClick={() => { store.showExcelExport() }} className={"`tool-btn` export-btn-setting"}><i className="icon-coms-Flow-setting " /> </Button>

                </Popover>
            </Button.Group>)

        ] : []
    }

    showNodeBrowser() {
        const { store } = this.props;
        if (this.nodeBrowser) {
            this.nodeBrowser.openModal();
        }
    }
}